<template>
	<view>
		
		<!-- 自定义导航栏 -->
		<u-navbar style="font-weight: bold;" leftText="返回" title="我的订单" :safeAreaInsetTop="false" bgColor="#3183FC" leftIconColor="#FFFFFF"
			:titleStyle="{ color: '#FFFFFF' }">
			<view class="u-nav-slot" slot="left">
				<div >
					<div @click="tzwdsy">
						<image style="width: 40rpx;" src="../../../static/wdimg/ztb-fh.png" mode="widthFix"></image>
					</div>
				</div>
			</view>
		</u-navbar>
		
		
		<div class="top">
			<div class="xxxg">	
				<div class="wdyhq-dh">
					<div style="border-bottom: 2px solid white;" 
						class="wdyhq-dh1" @click="tzwddd">全部</div>
					<div class="wdyhq-dh2" @click="tzdddzf">待支付</div>
					<div  class="wdyhq-dh3" @click="tzdddsy">待使用</div>
					<div  class="wdyhq-dh4" @click="tzdddpj">待评价</div>
				</div>
				
				<!-- 卡片开始 待支付-->
					<uni-card class="xxxg-card" title="基础卡片"  padding="10px 0" :thumbnail="avatar" >
								<template v-slot:title>
									<div class="card-title"  @click="tzdzfdd">
										<div class="card-title-1">订单编号：24255252522</div>
										<div class="card-title-2">></div>
									</div>
								</template>
				
					<div class="card-center">
						<div class="card-center-fwxm">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>
						
						<div class="card-center-fwmd">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>
							<div class="card-center-fwmd2">待支付</div>
						</div>
						
						<div class="card-center-xdsj">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-12</span>
							<span class="card-center-xdsj3">12:09</span>
						</div>
						
					</div>
				
					<div class="card-button">
						<div class="card-button1">
							<span>应付：</span>
							<span style="color: red;">230.56</span>
							<span>元</span>
						</div>
						
						<div class="card-button2">
							<div class="card-button2-d1"><button class="card-button2-b1" @click="tzyqxdd">取消订单</button></div>
							<div class="card-button2-d2"><button class="card-button2-b2" @click="tzdzfdd">立即支付</button></div>
						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->
				
				<!-- 卡片开始 待使用-->
					<uni-card class="xxxg-card" title="基础卡片"  padding="10px 0" :thumbnail="avatar" >
								<template v-slot:title>
									<div class="card-title" @click="tzdsydd">
										<div class="card-title-1">订单编号：24255252522</div>
										<div class="card-title-2">></div>
									</div>
								</template>
				
					<div class="card-center">
						<div class="card-center-fwxm">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>
						
						<div class="card-center-fwmd">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>
							<div class="card-center-fwmd2">待使用</div>
						</div>
						
						<div class="card-center-xdsj">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-12</span>
							<span class="card-center-xdsj3">12:09</span>
						</div>
						
					</div>
				
					<div class="card-button">
						<div class="card-button1">
							<span>实付：</span>
							<span style="color: red;">230.56</span>
							<span>元</span>
						</div>
						
						<div class="card-button2">
							<div class="card-button2-d1"><button class="card-button2-b1" @click="tzdtkdd">申请退款</button></div>
							<div class="card-button2-d2"><button class="card-button2-b2" @click="tzdsydd">扫码结算</button></div>
						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->
				
				<!-- 卡片开始 待评价-->
					<uni-card  class="xxxg-card" title="基础卡片"  padding="10px 0" :thumbnail="avatar" >
								<template v-slot:title>
									<div class="card-title" @click="tzdpjdd">
										<div class="card-title-1">订单编号：24255252522</div>
										<div class="card-title-2">></div>
									</div>
								</template>
				
					<div class="card-center">
						<div class="card-center-fwxm">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>
						
						<div class="card-center-fwmd">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>
							<div class="card-center-fwmd2">待评价</div>
						</div>
						
						<div class="card-center-xdsj">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-12</span>
							<span class="card-center-xdsj3">12:09</span>
						</div>
						
					</div>

					<div class="card-button">
						<div class="card-button1">
							<span>实付：</span>
							<span>230.56</span>
							<span>元</span>
						</div>
						
						<div class="card-button2">
							<div class="card-button2-d1"><button class="card-button2-b1" @click="tzpjym">立即评价</button></div>
							<div class="card-button2-d2"><button class="card-button2-b2">再来一单</button></div>
						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->
				
				
				
				<!-- 卡片开始 已取消-->
					<uni-card class="xxxg-card" title="基础卡片"  padding="10px 0" :thumbnail="avatar" >
								<template v-slot:title>
									<div class="card-title" @click="tzyqxdd">
										<div class="card-title-1">订单编号：24255252522</div>
										<div class="card-title-2">></div>
									</div>
								</template>
				
					<div class="card-center">
						<div class="card-center-fwxm">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>
						
						<div class="card-center-fwmd">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>
							<div class="card-center-fwmd2" style="color: gainsboro;">已取消</div>
						</div>
						
						<div class="card-center-xdsj">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-12</span>
							<span class="card-center-xdsj3">12:09</span>
						</div>
						
					</div>
				
					<div class="card-button">
						<div class="card-button1">
							<span>应付：</span>
							<span>230.56</span>
							<span>元</span>
						</div>
						
						<div class="card-button2">
							<div class="card-button2-d2"><button class="card-button2-b2">重新下单</button></div>
						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->
				
				<!-- 卡片开始 已退款-->
					<uni-card class="xxxg-card" title="基础卡片"  padding="10px 0" :thumbnail="avatar" >
								<template v-slot:title>
									<div class="card-title" @click="tzdtkdd">
										<div class="card-title-1">订单编号：24255252522</div>
										<div class="card-title-2">></div>
									</div>
								</template>
				
					<div class="card-center">
						<div class="card-center-fwxm">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>
						
						<div class="card-center-fwmd">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>
							<div class="card-center-fwmd2" style="color: gainsboro;">已退款</div>
						</div>
						
						<div class="card-center-xdsj">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-12</span>
							<span class="card-center-xdsj3">12:09</span>
						</div>
						
					</div>
				
					<div class="card-button">
						<div class="card-button1">
							<span>实付：</span>
							<span>230.56</span>
							<span>元</span>
						</div>
						
						<div class="card-button2">
							<div class="card-button2-d2"><button class="card-button2-b2">重新下单</button></div>
						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->
				
				<!-- 卡片开始 已完成-->
					<uni-card class="xxxg-card" title="基础卡片"  padding="10px 0" :thumbnail="avatar" >
								<template v-slot:title>
									<div class="card-title" @click="tzywcdd">
										<div class="card-title-1">订单编号：24255252522</div>
										<div class="card-title-2">></div>
									</div>
								</template>
				
					<div class="card-center">
						<div class="card-center-fwxm">
							<span>服务项目：</span>
							<span>车辆保养</span>
						</div>
						
						<div class="card-center-fwmd">
							<div class="card-center-fwmd1">
								<div class="card-center-fwmd1-1">服务门店：</div>
								<div class="card-center-fwmd1-2">大宝车辆维修店</div>
								<div class="card-center-fwmd1-3">
									<image src="/static/wdimg/plane@2x.png" mode="widthFix"></image>
								</div>
							</div>
							<div class="card-center-fwmd2">已完成</div>
						</div>
						
						<div class="card-center-xdsj">
							<span class="card-center-xdsj1">下单时间：</span>
							<span class="card-center-xdsj2">2023-03-12</span>
							<span class="card-center-xdsj3">12:09</span>
						</div>
						
					</div>
				
					<div class="card-button">
						<div class="card-button1">
							<span>实付：</span>
							<span>230.56</span>
							<span>元</span>
						</div>
						
						<div class="card-button2">
							
							<div class="card-button2-d2"><button class="card-button2-b2">再来一单</button></div>
						</div>
					</div>
				</uni-card>
				<!-- 卡片结束 -->
				
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
	
			}
		},
		methods: {
			
		tzwddd() {
					uni.navigateTo({
						url: "/pages/my/wddd/wddd"
					})
				},
		tzdddzf() {
			uni.navigateTo({
				url: "/pages/my/wddd/dddzf/dddzf"
			})
		},
		tzdddsy() {
			uni.navigateTo({
				url: "/pages/my/wddd/dddsy/dddsy"
			})
		},
		tzdddpj() {
			uni.navigateTo({
				url: "/pages/my/wddd/dddpj/dddpj"
			})
		},	
		
		
		
			// 待支付
		tzdzfdd() {
			uni.navigateTo({
				url: "/pages/my/wddd/dzfdd/dzfdd"
			})
		},
		// 已取消订单
		tzyqxdd() {
			uni.navigateTo({
				url: "/pages/my/wddd/yqxdd/yqxdd"
			})
		},
		// 退款订单
			tzdtkdd() {
				uni.navigateTo({
					url: "/pages/my/wddd/ytkdd/ytkdd"
				})
			},
			// 使用
			tzdsydd() {
				uni.navigateTo({
					url: "/pages/my/wddd/dsydd/dsydd"
				})
			},	
				// 待评价
			tzdpjdd	() {
				uni.navigateTo({
					url: "/pages/my/wddd/dpjdd/dpjdd"
				})
			},	
				//去评价
		tzpjym	() {
			uni.navigateTo({
				url: "/pages/my/wddd/pjym/pjym"
			})
		},		
		//已完成
		tzywcdd	() {
			uni.navigateTo({
				url: "/pages/my/wddd/ywcdd/ywcdd"
			})
		},	
				
			tzwdsy(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			},	
				
			
		}
	}
</script>

<style>
	.top {
			margin-top: 88rpx;
		width: 750rpx;
		height: 400rpx;
		background-color: #3183FC;
		/* 	overflow: hidden; */
		/* 	background-image: url(@/static/wdimg/aaa.jpg); */
		position: relative;
	}

	.xxxg {
		position: absolute;
		width: 750rpx;

	}

	.xxxg-card {
		/* 		height: 500rpx; */
		/* 	width: 750rpx; */
		border-radius: 25rpx;
	}

	.wdyhq-dh {
		width: 100%;
		color: white;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		margin-bottom: 30rpx;
	}

	
	.card-title{
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid gainsboro;
		height: 70rpx;
	}
	
	
	.card-center-fwmd{
		display: flex;
		
	}
	
	.card-center-fwmd1{
		width: 65%;
		display: flex;
	/* 	background-color: red; */
	}
	
	.card-center-fwmd2{
		width: 35%;
		display: flex;
		justify-content: center;
		color: blue;
	}
	.card-center-fwmd1-2{
		margin-right: 20rpx;	
	}
	
	.card-center-fwmd1-3 image{
		width: 25rpx;
	}
	
	.card-center-xdsj2{
		margin-right: 20rpx;
	}
	
	
	
	.card-button{
		border-top: 1px solid gainsboro;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.card-button1{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	
	
	.card-button2{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		
	}
	

	
	.card-button2-b1{
		font-size: 25rpx;
		border-radius: 20rpx;
		background-color: #BFBFBF;
		color: #ffff;
		margin-right: 10rpx;
	}
	
	.card-button2-b2{
		font-size: 25rpx;
		border-radius: 20rpx;
		background-color: #1E72F0;
		color: #ffff;
		margin-right: 10rpx;
	}
	
</style>